<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <style>
        .bannerContain {
            width: 550px;
            height: 400px;
            margin: 0 auto;
            position: relative;
        }

        img {
            width: 550px;
            height: 400px;
        }

        button {
            height: 40px;
            position: absolute;
            top: 50%;
            margin-top: -20px;
            background: rgba(0, 0, 0, 0.5);
            color: white;
            border: none;
            padding: 10px;
            cursor: pointer;
        }

        .prev {
            left: 2px;
        }

        .next {
            right: 0px;
        }

        ul {
            width: 100px;
            height: 30px;
            position: absolute;
            bottom: 0;
            left: 50%;
            margin-left: -80px;
        }

        ul li {
            list-style: none;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.5);
            float: left;
            margin: 0 5px;
        }

        ul li.active {
            background: white;
        }
    </style>
</head>

<body>
    <div class="bannerContain">
        <div class="banner">
            <img src="./img/1.png">
        </div>
        <button class="prev">❮</button>
        <button class="next">❯</button>
        <ul>
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>
<script>
    let timer = null;
    let index = 0;
    let arr = ["./img/1.png", "./img/2.png", "./img/3.png", "./img/4.png", "./img/5.png"];
    function startInterval() {
        timer = setInterval(() => {
            index++;
            if (index == 5) {
                index = 0;
            }
            document.querySelector("img").src = arr[index];
            if (index != 0) {
                document.querySelector(`ul li:nth-child(${index})`).classList.remove("active");
            } else {
                document.querySelector(`ul li:nth-child(${arr.length})`).classList.remove("active");
            }
            document.querySelector(`ul li:nth-child(${index + 1})`).classList.add("active");
        }, 2000)
    }

    startInterval();

    const container = document.querySelector('.bannerContain');
    container.addEventListener('mouseenter', () => {
        clearInterval(timer);
        timer = null;
    });

    container.addEventListener('mouseleave', () => {
        startInterval();
    });

    const prevBtn = document.querySelector('.prev');
    const nextBtn = document.querySelector('.next');

    nextBtn.addEventListener('click', () => {
        index++;
        if (index == 5) {
            index = 0;
        }
        document.querySelector("img").src = arr[index];
        document.querySelectorAll('ul li').forEach(li => li.classList.remove('active'));
        document.querySelector(`ul li:nth-child(${index + 1})`).classList.add("active");
    });

    prevBtn.addEventListener('click', () => {
        index--;
        if (index == -1) {
            index = arr.length - 1;
        }
        document.querySelector("img").src = arr[index];
        document.querySelectorAll('ul li').forEach(li => li.classList.remove('active'));
        document.querySelector(`ul li:nth-child(${index + 1})`).classList.add("active");
    })
</script>

</html>